<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 ref="one">title == {{ title }}</h2>
        <my-head></my-head>
        <Parent></Parent>
    </div>

    <template id="parent">
        <div style="border: 1px solid salmon;padding: 15px;">
            <h2>Parent - 父组件</h2>
            <child-one :count="count" ref="childone"></child-one>
            <child-two :change-msg="changemessage" @changemessage="changemessage" ref="childtwo" @changecount="count++"
                :count-inc="countAdd"></child-two>
        </div>
    </template>

    <template id="cone">
        <div style="border:1px solid darkgoldenrod;padding:15px;margin: 15px;">
            <h2>childone - 1 - 子组件 </h2>
            <h2>num == {{num}}</h2>
            <h2>msg == {{msg}}</h2>
            <h2>count == {{count}}</h2>
            <h2>message == {{message}}</h2>
        </div>
    </template>
    <template id="ctwo">
        <div style="border:1px solid darkgoldenrod;padding:15px;margin: 15px;">
            <h2>childtwo - 2 - 子组件 </h2>
            <button @click="changeOneCount">修改组件one 的 count</button>
            <p>
                <input type="text" @input="change">
            </p>
            <button @click="changeOneShow">点击切换</button>
            <p>
                <button @click="$emit('changecount')">自定义修改 count</button>
                <button @click="$parent.count++">反向Props 修改 count</button>
            </p>
            <p>
                <button @click="$emit('changemessage','I am very tired for H5')">自定义修改 message</button>
                <button @click="$parent.changemessage('Are you ok For H5')">$parent 修改 message</button>
                <button @click="changeMsg(',,,,,')">反向props 修改 message</button>
            </p>
        </div>
    </template>
    <script>
        const bus = new Vue()   // 空折Vue实例对象 事件总线
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        Vue.component('Parent', {
            template: "#parent",
            data() {
                return {
                    count: 2000,
                }
            },
            methods: {
                countAdd() {
                    this.count++;
                },
                changemessage(msg) {
                    // this.$refs.childone = 组件one的this
                    this.$refs.childone.message = msg;
                }
            }
        })
        Vue.component('childOne', {
            template: '#cone',
            props: ['count'],
            data() {
                return {
                    num: 999,
                    msg: 'are you ok?',
                    show: true,
                    message: 'Hello WH2309'
                }
            },
            mounted() {
                bus.$on('countchange', n => {
                    this.num += n;
                })
                bus.$on('msgchange', msg => {
                    this.msg = msg;
                })
                bus.$on('showchange', () => {
                    this.show = !this.show;
                })
            }
        })
        Vue.component('ChildTwo', {
            template: '#ctwo',
            props: ['countInc', 'changeMsg'],
            methods: {
                changeOneCount() {
                    bus.$emit('countchange', 9)
                },
                change(e) {
                    bus.$emit('msgchange', e.target.value)
                },
                changeOneShow() {
                    bus.$emit('showchange')
                }
            }
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '组件通信 - （兄弟组件通信）',
                word: '2309',
                flag: true,
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                this.$refs.one.style.fontSize = '20px'
            }
        })
    </script>
    <!-- 
        组件通信 (兄弟组件通信)
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  

        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>

        2. 兄弟组件关系  
        <B></B>
        <C></C>


        Emit  发送
        On    监听 
        Once  只触发一次  

        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs      
        c. 事件center总线 (bus new Vue)
        d. events 事件  EventBus 
        e. vuex (最后一天) 

        
        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件center总线   
        e.  vuex   


        3.  兄弟组件之间的通信  
        a. 事件center总线 (bus new Vue)  新建空的Vue  $emit $on  $once  EventBus 
        b. 中间人模式  (子改父  父改子 )   把父亲组件当做中间人   6种  
        c. vuex  


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数  
     -->
</body>

</html>